<template>
  <button :class="className" @click="onclick">
    <div :class="contentName">
      <slot />
    </div>
  </button>
</template>

<script lang="ts">
  import { computed } from 'vue';
  import { props } from './props';
  import globalConfig from '../../utils/global-config.js';
  export default {
    props,
    emits: ['click'],
    setup(props, { emit }) {
      const prefixCls = globalConfig.getPrefixCls('button');
      const className = computed(() => {
        return [
          prefixCls,
          'var--box',
          `var--inline-flex`,
          `var-elevation--2`,
          `${prefixCls}--${props.type ?? 'default'}`,
          `${prefixCls}--${props.size ?? 'normal'}`,
          // `${prefixCls}-status-${props.status != null ? props.status : 'normal'}`,
          {
            [`${prefixCls}--block`]: props.block,
            [`${prefixCls}-disabled`]: props.disabled,
          },
        ];
      });

      function onclick() {
        emit('click');
      }

      const contentName = computed(() => {
        return [`${prefixCls}__content`];
      });

      return {
        className,
        contentName,
        onclick,
      };
    },
  };
</script>

<style lang="less">
  @import './button';
</style>
